<template>
  <div>
    <router-link to="/home" replace tag="button">显示首页</router-link>
    <router-link to="/about" replace tag="button">关于界面</router-link>
    <router-link :to="'/user' + user_id" replace tag="button"
      >用户界面</router-link
    >
    <!-- <router-link
      :to="{
        path: '/profile',
        query: { name: 'zhangsna', age: '20', sex: 'nan' }
      }"
      tag="button"
      replace
      >我的</router-link
    > -->
    <button @click="profile">我的</button>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      user_id: "zhangsan"
    };
  },
  methods: {
    profile() {
      this.$router.push({
        path: "/profile",
        query: {
          name: "zhangsna",
          age: "22",
          sex: "nan"
        }
      });
    },
    about() {
      this.$router.push("/user_id" + this.user_id);
    }
  }
};
</script>

<style></style>
